<template>
  <div class="connect">
    <div class="connect_box">
      <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item :label="$t('Order_module.name')">
          <el-input v-model="select.userName" :placeholder="$t('Order_module.name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.status')">
          <el-select v-model="select.status" :placeholder="$t('public.status')">
              <el-option
                v-for="item in selectstatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="formselect()" >{{$t('public.query')}}</el-button>
          <el-button type="primary" @click="resetting()" >{{$t('public.resetting')}}</el-button>
        </el-form-item>
      </el-form> -->
      <div class="btns_ayyay">
         <el-button @click="addUser">{{$t('Order_module.newly_added')}}</el-button>
      </div>
     <!-- :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" -->
        <el-table :data="tableData" border row-key="id" default-expand-all :tree-props="{children: 'child', hasChildren: 'hasChildren'}" stripe style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"> </el-table-column>
          <el-table-column align="center" prop="userAccount" :label="$t('Order_module.user_account')"  min-width="180"> </el-table-column>
          <el-table-column align="center" prop="userName" :label="$t('Order_module.corporate_name')"  min-width="120">
            <template slot-scope="{row}">
              <p>{{row.userName}}</p>
              <p>{{row.koreanName}}</p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Order_No" :label="$t('public.status')"  min-width="180">

            <template slot-scope="scope">
              {{scope.row.status==1?$t('public.Active'):$t('public.not_active')}}
            </template>
          </el-table-column>
          <!-- 用户角色 -->
          <el-table-column align="center" prop="roleName" :label="$t('UserInfo.User_Roles')"  min-width="120">

          </el-table-column>
          <el-table-column align="center" prop="phone" :label="$t('Order_module.cell_phone_num')"  min-width="180"> </el-table-column>
          <el-table-column align="center" prop="rechargeType" :label="$t('public.Recharge_type')"  min-width="120">
            <template slot-scope="scope">
              {{scope.row.Recharge_type==1?$t('public.amount_of_money'):$t('Order_module.Order_No')}}
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="Order_No" :label="$t('public.operate')"  min-width="180">

            <template slot-scope="scope" >
              <!-- <el-popconfirm
               v-if="scope.row.id!=1"
                @confirm="deletes(scope.row)"
                :confirm-button-text="$t('public.determine')"
                :cancel-button-text="$t('public.cancellation')"
                :title="$t('public.Are_you_sure_about_this_operation')"
              >
              <el-button v-if="self.id == scope.row.id?false:true" type="text" style="color: red;"  slot="reference" size="small">{{$t('public.delete') }}</el-button>
              </el-popconfirm> -->
              <el-button v-if="self.id == scope.row.id?false:true"  type="text" @click="navTo(scope.row)" size="small">{{$t('public.Unit_price_operation')}}</el-button>
              <el-button v-if="self.id == scope.row.id?false:true"  type="text" @click="getOtherUserInfo(scope.row.id)" size="small">{{$t('public.modify')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 50, 200, 400]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
    <!-- 权限管理弹出层 -->
    <el-dialog  :title="$t('UserInfo.Rights_Management')" :visible.sync="rouleShow"  width="60%" :before-close="handleClose">
      <el-descriptions title="">
          <el-descriptions-item :label="$t('Order_module.user_account')">123131361654</el-descriptions-item>
          <el-descriptions-item :label="$t('Order_module.name')">张三</el-descriptions-item>
      </el-descriptions>
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :props="defaultProps">
      </el-tree>
    </el-dialog>
    <!-- 用户信息修改弹出层 -->
    <el-dialog  :title="pop_title" :visible.sync="userEditShow"  width="60%" >
        <el-form :inline="true"  :rules="rules" ref="ruleForm" :model="userInfo" class="demo-form-inline">
          <el-form-item label-width="140px"  prop="userAccount" style="width: 48%;" :label="$t('Order_module.user_account')">
            <el-input style="width:15vw;" maxlength="20" v-model="userInfo.userAccount" show-word-limit  :disabled="showType==1" :placeholder="$t('Order_module.user_account')"></el-input>
          </el-form-item>
          <el-form-item label-width="140px" prop="rechargeType" style="width: 48%;" :label="$t('public.Recharge_type')">
            <el-select :disabled="showType==0 || self.id == 1?false:true  " style="width:15vw;" v-model="userInfo.rechargeType" :placeholder="$t('public.Recharge_type')">
                <el-option
                  v-for="item in payTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label-width="140px" style="width: 48%;" prop="userName" :label="$t('Order_module.corporate_name')">
            <el-input style="width:15vw;" v-model="userInfo.userName" show-word-limit userAccount maxlength="50"  :placeholder="$t('Order_module.corporate_name')"></el-input>
          </el-form-item>
          <el-form-item label-width="140px" style="width: 48%;" prop="koreanName" :label="$t('Order_module.Hcorporate_name')">
            <el-input style="width:15vw;" v-model="userInfo.koreanName" show-word-limit  maxlength="50"  :placeholder="$t('Order_module.Hcorporate_name')"></el-input>
          </el-form-item>
          <el-form-item v-if="self.id != userInfo.roleId" label-width="140px"  prop="roleId" style="width: 48%;" :label="$t('UserInfo.User_Roles')">
            <el-select style="width:15vw;" v-model="userInfo.roleId" :placeholder="$t('UserInfo.User_Roles')">
                <el-option
                  v-for="item in RoleList"
                  :key="item.id"
                  :label="item.roleName "
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item prop="status" label-width="140px" style="width: 48%;" :label="$t('public.status')">
            <el-select :disabled="self.id == userInfo.roleId" style="width:15vw;"   v-model="userInfo.status" :placeholder="$t('public.status')">
                <el-option
                  v-for="item in selectstatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label-width="140px" style="width: 48%;" :label="$t('UserInfo.mailbox')">
            <el-input style="width:15vw;" show-word-limit maxlength="30" v-model="userInfo.email" :placeholder="$t('UserInfo.mailbox')"></el-input>
          </el-form-item>
          <el-form-item prop="phone" label-width="140px" style="width: 48%;" :label="$t('Order_module.cell_phone_num')">
            <el-input style="width:15vw;" v-model="userInfo.phone" show-word-limit @input="(e)=>{userInfo.phone = e.replace(/[^0-9]/g,'')}" maxlength="11"  :placeholder="$t('Order_module.cell_phone_num')"></el-input>
          </el-form-item>
          <el-form-item v-if="userInfo.id?false:true" prop="password" label-width="140px" style="width: 48%;" :label="$t('UserInfo.Password')">
            <el-input style="width:15vw;" maxlength="30" show-word-limit v-model="userInfo.password" :placeholder="$t('UserInfo.Password')"></el-input>
          </el-form-item>
          <div style="display: flex; justify-content: space-around;" >
            <el-form-item>
              <el-button style="margin-right: 50px;width: 120px;" :loading="onSubmitLoading" type="primary" @click="onSubmit('ruleForm')">{{$t('public.determine')}}</el-button>
              <el-button style="margin-right: 0 ;width: 120px;"  @click="userEditShow=false">{{$t('public.cancellation')}}</el-button>
            </el-form-item>
          </div>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    user_list,
    recharge_userInfo,
    user_info,
    findUserRoleList,
    user_update,
    user_delete,
    user_save
  } from '@/api/wqzApi'
  import store from '@/store'
  export default {
    components: {
      },
    data() {
      return {
        onSubmitLoading:false,
        lang:store.getters.language,
        rules:{
          userAccount: [
              { required: true, message: this.$t('public.Enter')+this.$t('Order_module.user_account'), trigger: 'blur' },
              { min: 6, max:20, message:this.$t('public.Account_length_6_20'), trigger: 'blur' }
          ],
          roleId:[
              { required: true, message: this.$t('public.Please_select')+this.$t('Order_module.rechargeType'), trigger: 'blur' },
          ],
          userName:[
              { required: true, message: this.$t('public.Enter')+this.$t('Order_module.corporate_name'), trigger: 'blur' },
          ],
          koreanName:[
              { required: true, message: this.$t('public.Enter')+this.$t('Order_module.corporate_name'), trigger: 'blur' },
          ],
          rechargeType:[
              { required: true, message: this.$t('public.Please_select')+this.$t('public.Recharge_type'), trigger: 'blur' },
          ],
          roleId:[
              { required: true, message: this.$t('public.Please_select')+this.$t('Order_module.corporate_name'), trigger: 'blur' },
          ],
          status:[
              { required: true, message: this.$t('public.Please_select')+this.$t('public.status'), trigger: 'blur' },
          ],
          phone:[
              { required: true, message: this.$t('public.Enter')+this.$t('Order_module.cell_phone_num'), trigger: 'blur' },
              { min: 8, max:11, message:this.$t('Order_module.cell_phone_num')+this.$t('public.Account_length_6_20'), trigger: 'blur' }
          ],
          password:[
              { required: true, message: this.$t('public.Enter')+this.$t('UserInfo.Password'), trigger: 'blur' },
              { min: 6, max:50, message:this.$t('public.Password_length_6_60'), trigger: 'blur' }
          ],

        },
        pop_title:'',
        showType:null , //1修改0添加
        self : store.getters.userInfo,
        select:{
          userName:'',
          status:''
        },
        data: [],
         defaultProps: {
           children: 'children',
           label: 'label'
         },
        value1:false,// 是否允许数据互通
        rouleShow:false,//权限管理show
        userEditShow:false, //对话框显示
        total:0,
        limit:10,
        page:1,
        tableData:[//表格列表
        ],
        userInfo:{//查询的用户信息

        },
        RoleList:[ //角色列表

        ],
        selectVal:null,
        selectstatus:[ //用户状态
          {label:this.$t('public.Active') , value:1},
          {label:this.$t('public.not_active') , value:0}
        ],
        payTypeList:[//充值类型
          {label:this.$t('public.amount_of_money') , value:1},
          {label:this.$t('Order_module.Order_No') , value:0}
        ],
        formInline:{
          time:'',
          user:'',

        }
      }
    },

    created() {
    },
    mounted() {
      console.log(this.self)
      this.getList()
    },
    destroyed() {

    },
    methods: {
      resetting(){
        this.select={
          userName:'',
          status:''
        }
        this.getList()
      },
      // 删除用户
      deletes(item){
        var data = {
          clientId:item.id
        }
        user_delete(data).then(res=>{
          this.$message({
            type:'success',
            message: this.$t('public.Operation_successful'),
          })
          this.getList()
        })
      },
      // 获取其他用户信息
      getOtherUserInfo(id){
        var data = {
            userId:Number(id)
        }
        findUserRoleList().then(res=>{
          this.RoleList = res.roleList
        })
        user_info(data).then(res=>{
          console.log('获取用户信息' , res)
          this.userInfo =  res.user
          this.showType = 1
          this.pop_title = this.$t('Order_module.User_information_modification')
          this.userEditShow = !this.userEditShow
        })
      },
      addUser(){
        // 添加用户
        this.showType = 0
        this.userInfo = {}
        findUserRoleList().then(res=>{
          this.RoleList = res.roleList
          this.pop_title = this.$t('UserInfo.User_information_add')
          this.userEditShow = !this.userEditShow
        })
      },

      formselect(){
        this.page = 1
        this.getList()
      },
      getList(){
        var data = {
          page:Number(this.page),
          limit:Number(this.limit),
          userName:this.select.userName,
          status:this.select.status
        }
        recharge_userInfo(data).then(res=>{
          console.log(res,'返回信息')
          this.tableData = res.page.list
          this.total = res.page.totalCount
        })
      },
      onSubmit(formName){ //提交用户信息
      this.onSubmitLoading = true
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.showType == 1){
              // 修改用户信息
              user_update(this.userInfo).then(res=>{
                  this.$message({
                    message: this.$t('public.Operation_successful'),
                    type: 'success'
                  });
                  this.userEditShow = !this.userEditShow
                  this.onSubmitLoading = false
                  this.getList()
              })
            }else{
              console.log(this.userInfo)
              user_save(this.userInfo).then(res=>{
                  this.$message({
                    message: this.$t('public.Operation_successful'),
                    type: 'success'
                  });
                  this.userEditShow = !this.userEditShow
                  this.onSubmitLoading = false
                  this.getList()
              })
            }
          } else {
            this.onSubmitLoading = false
            console.log('error submit!!');
            return false;
          }
        });


      },
      handleSelectionChange(e){
        console.log(e)
      },
      handleSizeChange(e){
        this.limit = e
        this.getList()
      },
      handleCurrentChange(e){
        this.page = e
        this.getList()
      },
      handleClose(){},
      navTo(row){
        console.log(row)
          this.$router.push({ path:'/Cost_module/AJD/Cost_module/Billing_management?name='+ encodeURIComponent(row.userName)})
        },

      clickroule(){
        this.rouleShow = !this.rouleShow
      }
    }
  }
</script>

<style scoped>
.connect_box{
  background-color: #fff;
  padding: 1%;
}
.btns_ayyay{
  margin-bottom: 20px;
}
</style>
